<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="工单号" class="me-2"
      [(ngModel)]="filterParam.JobOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品编码" name="产品编码" class="me-2"
      [(ngModel)]="filterParam.PartNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品名称" name="产品名称" class="me-2"
      [(ngModel)]="filterParam.PartName">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序编码" name="工序编码" class="me-2"
      [(ngModel)]="filterParam.ProcessNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序名称" name="工序名称" class="me-2"
      [(ngModel)]="filterParam.ProcessName">
    <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter2()"><i
        class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-5">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true" [fixHeader]="true"
      [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
      (checkAllChange)="getCheckedRows();getCheckedRowsData() " (rowCheckChange)="getCheckedRows();getCheckedRowsData()" [maxHeight]="'400px'"
      [resizeable]="true">
      <thead dTableHead >
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="'0px'">选择</th>
          <th dHeadCell [fixedLeft]="colOption.fixedLeft"
         *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">{{colOption.header}}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr>
            <td dTableCell [fixedLeft]="'0px'">
              <label class="custom-radio">
                <input type="radio" name="radio-group" (change)="radio($event, rowItem)">
                <span class="checkmark"></span>
              </label>
            </td>
            <td dTableCell [fixedLeft]="'80px'">
              <span dTooltip [content]="rowItem.jobOrderNum">{{rowItem.jobOrderNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNumber">{{rowItem.processNumber}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processNum">{{rowItem.processNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.processName">{{rowItem.processName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.isInspection">
                <d-tag [tag]="rowItem?.isInspection | booleanToText:'检验':'不检验'" [labelStyle]="rowItem?.isInspection"></d-tag>
              </span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productNum">{{rowItem.productNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productName">{{rowItem.productName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.partType">{{rowItem.partType}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.uom">{{rowItem.uom}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.productionQuantity">{{rowItem.productionQuantity}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.reportedAmount">{{rowItem.reportedAmount}}</span>
            </td>
            <td dTableCell>
              <d-progress [percentage]="(rowItem.qualifiedAmount/rowItem.productionQuantity)*100">
                <ng-template [dPosition]="'center'">
                  <div class="overflow-ellipsis" [title]="rowItem.qualifiedAmount+'/'+ rowItem.productionQuantity">{{ rowItem.qualifiedAmount }}/{{rowItem.productionQuantity}}</div>
                </ng-template>
              </d-progress>
            </td>
            <td dTableCell>
              <span dTooltip [content]="(rowItem.productionQuantity - rowItem.qualifiedAmount).toString()">{{rowItem.productionQuantity - rowItem.qualifiedAmount}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.planStartTime">{{rowItem.planStartTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.planFinishTime">{{rowItem.planFinishTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{CheckedRows.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="filterParam.PageSize"
      [(pageIndex)]="filterParam.PageNumber" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
